<template>
  <div class="register">
    <div class="register-form">
      <p>用户注册</p>
      <div class="register-form-inputbox">
        <el-input
          placeholder="姓名"
          prefix-icon="el-icon-user-solid"
          v-model="user.name"
        >
        </el-input>
        <el-select v-model="user.sex" placeholder="请选择性别">
          <el-option
            label="男"
            value=1>
          </el-option>
          <el-option
            label="女"
            value=0>
          </el-option>
          <div slot="prefix">
            <i class="el-icon-user-solid"></i>
          </div>
        </el-select>
        <el-input
          placeholder="用户名"
          prefix-icon="el-icon-user-solid"
          v-model="user.nickName"
        >
        </el-input>
        <el-input
          placeholder="手机号"
          prefix-icon="el-icon-phone-outline"
          v-model="user.telephone"
        >
        </el-input>
        <el-input
          type="password"
          placeholder="密码"
          prefix-icon="el-icon-lock"
          v-model="user.password"
        >
        </el-input>
        <el-input
          placeholder="身份证号"
          prefix-icon="el-icon-user-solid"
          v-model="user.idNo"
        >
        </el-input>
      </div>
      <div class="register-form-operatebox">
        <div style="text-align: center; width: 260px">
          <el-button type="primary" round @click="register">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../network/home";
export default {
  name: "register",
  data() {
    return {
      user: {
        name: "",
        password: "",
        telephone: "",
      },
    };
  },
  computed: {
  },
  methods: {
    register() {
      let user = this.user;
      if (user.name == "") {
        this.$message("请输入用户名");
        return;
      }
      if (user.password == "") {
        this.$message("请输入密码");
        return;
      }
      this.register2();
    },
    register2() {
      api.register(this.user).then(res=>{
        console.log(res);
        this.$message.success("注册成功");
        this.$router.push('./login')
      })
    },
  },
  mounted () {
  },
};
</script>

<style lang="scss" scoped >
.register {
  background-image: url("../assets/bgc.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.register-form {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #eee;
  width: 260px;
  height: 500px;
  padding: 0 43px;
  p {
    text-align: center;
    padding: 20px;
    // box-shadow: 0px 15px 1px -15px #000;
    border-bottom: 1px solid rgba(145, 141, 141, 0.144);
  }
}
.register-form-inputbox {
  height: 270px;
  font-size: 20px;
  margin-bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 5px;
  justify-content: space-between;
  .imgText {
    font-size: 14px;
  }
}
.register-form-operatebox {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.operatebox-forget {
  color: rgb(119, 115, 115);
  text-decoration: none;
}
.operatebox-register {
  color: rgb(11, 162, 207);
}
::v-deep .el-input__inner {
  border-radius: 50px;
  padding-left: 50px;
  height: 45px;
}
::v-deep .el-input__icon {
  font-size: 20px;
  padding: 0 10px;
}
::v-deep .el-select .el-icon-user-solid{
  font-size: 20px;
  padding: 10px;
}
.el-button {
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #a70303;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.el-input{
  margin-bottom: 10px;
}
.el-select{
  margin-bottom: 10px;
}
</style>